Angular Material একটি শক্তিশালী UI লাইব্রেরি যা আপনাকে প্রি-বিল্ট এবং কাস্টমাইজেবল কম্পোনেন্ট প্রদান করে, যার মধ্যে অন্যতম হলো বাটন (Button)। Angular Material এর বাটন কম্পোনেন্ট ব্যবহার করে আপনি রেসপন্সিভ, আকর্ষণীয় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সক্ষম হবেন। বাটন কম্পোনেন্টটি বিভিন্ন স্টাইল এবং অবস্থা নিয়ে কাজ করতে পারে, যেমন সাধারণ বাটন, রাইজড বাটন, ফ্ল্যাট বাটন, এবং অবস্থা পরিবর্তন।

অ্যাঙ্গুলার ম্যাটেরিয়াল বাটন স্টাইল

Angular Material বাটন কম্পোনেন্টে কিছু পূর্বনির্ধারিত স্টাইল রয়েছে যা আপনার অ্যাপ্লিকেশনের ডিজাইন অনুযায়ী কাস্টমাইজ করা যায়। এর মধ্যে রয়েছে:

• MatButton: সাধারণ বাটন
• MatRaisedButton: রাইজড বাটন
• MatFlatButton: ফ্ল্যাট বাটন
• MatIconButton: আইকন বাটন
• MatButtonToggle: বাটন টগল

১. সাধারণ বাটন (mat-button)

এটি Angular Material এর সবচেয়ে সাধারণ বাটন স্টাইল। এটি একটি সহজ বাটন যা কোনও শ্যাডো বা উত্তোলন ছাড়া সরাসরি প্রদর্শিত হয়।

<button mat-button>Click me</button>

২. রাইজড বাটন (mat-raised-button)

এটি একটি উত্তোলিত বাটন যা শ্যাডো সহ প্রদর্শিত হয়, এবং এটি সাধারণত গুরুত্বপূর্ণ অ্যাকশন বোতাম হিসেবে ব্যবহৃত হয়।

<button mat-raised-button>Click me</button>

৩. ফ্ল্যাট বাটন (mat-flat-button)

ফ্ল্যাট বাটন কোনও শ্যাডো বা উত্তোলন ছাড়া সাধারণ বাটন এর মতো কিন্তু এটিতে ব্যাকগ্রাউন্ড এবং বর্ডার সাধারণত রঙিন থাকে।

<button mat-flat-button>Click me</button>

৪. আইকন বাটন (mat-icon-button)

এটি একটি বাটন যা শুধুমাত্র একটি আইকন প্রদর্শন করে। সাধারণত এই বাটনটি ছোট পরিসরে আইকন ব্যবহার করতে ব্যবহৃত হয়।

<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>

৫. বাটন টগল (mat-button-toggle)

এটি একটি বিশেষ ধরনের বাটন যা টগল স্টাইলের বোতাম হিসেবে কাজ করে, যেখানে বাটন ক্লিক করলে এটি দুটো অবস্থার মধ্যে পরিবর্তন হতে পারে।

<mat-button-toggle-group>
  <mat-button-toggle value="left">Left</mat-button-toggle>
  <mat-button-toggle value="right">Right</mat-button-toggle>
</mat-button-toggle-group>

বাটন অবস্থা (Button States)

Angular Material বাটন বিভিন্ন অবস্থার জন্য বিভিন্ন স্টাইল সমর্থন করে, যেমন disabled, loading, active ইত্যাদি। এগুলি অ্যাপ্লিকেশনের বিভিন্ন কার্যকারিতার উপর ভিত্তি করে ব্যবহার করা যায়।

১. Disabled বাটন

যদি আপনি কোনও বাটনকে নিষ্ক্রিয় (disabled) করতে চান, তাহলে disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<button mat-raised-button disabled>Disabled Button</button>

২. লোডিং অবস্থা

বাটনের উপর একটি লোডিং ইন্ডিকেটর ব্যবহার করতে পারেন। Angular Material এ MatProgressSpinner ব্যবহার করে লোডিং ইন্ডিকেটর প্রদর্শন করা হয়।

<button mat-raised-button [disabled]="isLoading">
  <mat-spinner *ngIf="isLoading" diameter="20"></mat-spinner>
  Submit
</button>

এখানে isLoading একটি boolean ভেরিয়েবল যা আপনার লোডিং স্টেট নিয়ন্ত্রণ করবে।

৩. Active অবস্থা

বাটনটি অ্যাকটিভ অবস্থা চিহ্নিত করতে, অ্যাপ্লিকেশনে কিছু সিএসএস ক্লাস ব্যবহার করতে পারেন।

<button mat-raised-button [class.active]="isActive">
  Active Button
</button>

এখানে isActive একটি boolean ভেরিয়েবল যা বাটনের অ্যাকটিভ স্টেট নির্ধারণ করবে।

বাটন স্টাইল কাস্টমাইজেশন

Angular Material বাটনের স্টাইল কাস্টমাইজ করা খুব সহজ। আপনি CSS বা SCSS ব্যবহার করে বাটনের আকার, রং, বর্ডার এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন।

১. বাটনের রঙ কাস্টমাইজ করা

আপনি color অ্যাট্রিবিউট ব্যবহার করে বাটনের রঙ পরিবর্তন করতে পারেন। Angular Material বাটনে তিনটি প্রাথমিক রঙ সাপোর্ট করে: primary, accent, এবং warn।

<button mat-raised-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-raised-button color="warn">Warn Button</button>

২. কাস্টম CSS ব্যবহার

আপনি CSS বা SCSS ব্যবহার করে বাটনের স্টাইল কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:

button.mat-raised-button {
  background-color: #ff4081;
  color: white;
}

এটি বাটনের ব্যাকগ্রাউন্ড এবং ফন্ট রঙ পরিবর্তন করবে।

Angular Material বাটন একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজেবল কম্পোনেন্ট, যা আপনার অ্যাপ্লিকেশনের UI ডিজাইনকে আরও আকর্ষণীয় ও ব্যবহারকারী-বান্ধব করতে সহায়ক। এটি বিভিন্ন স্টাইল এবং অবস্থা (যেমন, সাধারণ বাটন, রাইজড বাটন, ফ্ল্যাট বাটন, আইকন বাটন) সমর্থন করে এবং আপনি সহজেই এর ডিজাইন কাস্টমাইজ করতে পারেন। Disabled, loading, এবং active অবস্থার মতো বিভিন্ন বাটন অবস্থা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে।